Working with hanging punctuation 標點符號懸掛處理

標點符號在文字排版中會出現一個問題：它們佔用的空間並不會被完全填滿（比如句號周圍會有很多空白），這就會造成視覺上的參差不齊。這種情況在句子開頭的引號處（包括單引號和雙引號）特別明顯。

有一個好訊息是，我們可以透過簡單的調整來解決這個視覺問題。這種調整方法可以讓文字看起來更加美觀、易讀。

這種技術叫做"標點符號懸掛"（hanging punctuation）。它的做法很簡單：把標點符號放到文字邊緣的外面，這樣就能讓主要文字內容形成一條整齊的直線，看起來更加規整。

雖然這種懸掛效果主要用在引號上，但它也可以用在其他標點符號上。比如說，列表前面的符號也可以這樣處理

Implementing hanging punctuation on the web在網頁中實現標點符號懸掛

列表功能會自動支援懸掛效果，但其他標點符號需要額外設定。目前只有Safari原生支援此功能，其他瀏覽器需要透過span標籤和CSS來實現位置調整。

span.opening-mark {
  margin-left: -1rem;
}

Implementing hanging punctuation in desktop design apps 在桌面設計軟體中實現標點符號懸掛

在設計軟體中實現標點符號懸掛只需兩步：為開始引號建立單獨文字框，然後與主要內容文字框對齊。許多設計軟體如Figma都支援自動對齊，讓這個過程變得簡單。在像Figma這樣的設計工具中，藉助自動對齊（"吸附"）功能，可以輕鬆地對齊兩個獨立文字框的基線。